<template>
  <div class="order-list" v-if="orderData.order">
    <div class="order-layout order-step box-width container">
      <div class="step-layout">
        <div class="item active">
          选择车型
        </div>
        <div class="item active">
          详情订单填写
        </div>
        <div class="item active" v-if="orderData.order.type === 'PREPAY'">
          在线支付
        </div>
        <div class="item active" v-if="orderData.order.type === 'ARRIVEPAY'">
          订单确认
        </div>
        <div class="item">
          预订成功
        </div>
      </div>
      <div class="detail" v-if="orderData.order">
        <div class="clearfix" style="position: relative;">
          <p style="font-size: 18px; font-weight: bold;">* {{orderData.pickupLocation.airport_location_description ? '门店位于' + orderData.pickupLocation.airport_location_description : ''}}{{orderData.pickupLocation.airport_location_description ? '，' : ''}}{{orderData.pickupLocation.shuttle_service_cn_description}}</p>
          <!-- <i class="iconfont icon-eye" style="font-size: 20px; font-weight: bold;position: absolute; right: 0; top: 5px;"></i> -->
        </div>
        <!--<p style="font-size: 18px; font-weight: bold;">* 门店位于机场内，免费巴士可达</p>-->
        <div class="order-location" v-if="orderData.pickupLocation !== undefined">
          <div class="item">
            <span style="font-size: 14px;">取车</span><span class="font-blod" style="font-size: 18px;">{{orderData.pickupLocation.city_name}}</span><span>{{orderData.pickupLocation.name}}</span><span>{{orderData.order.pickup_date}}</span>
          </div>
          <div class="item">
            <span style="font-size: 14px;">还车</span><span class="font-blod" style="font-size: 18px;">{{orderData.returnLocation.city_name}}</span><span>{{orderData.returnLocation.name}}</span><span>{{orderData.order.return_date}}</span>
          </div>
        </div>
        <div class="car-description">
          <div class="img-cover">
            <img src="http://qiniu.prod.fita-club.com/web/rent-card1.png" style="margin: 0 30px;">
          </div>
          <div class="description" style="margin-left: 250px;">
            <div class="title" style="font-size: 18px;">{{orderData.carInfo.model_name}}</div>
            <div class="subtitle" style="margin-top: 0; margin-bottom: 10px;">{{orderData.carInfo.model_code_class_desc}}/ {{orderData.carInfo.category_code_desc}}/ {{orderData.carInfo.transmission_type === 'MANUAL' ? '手动' : '自动'}}/ {{orderData.carInfo.baggage_quantity}}件行李/ {{orderData.carInfo.passenger_quantity}}座位/ {{orderData.carInfo.air_condition_in ? '含空调' : '不含空调'}}/ {{orderData.carInfo.model_code_type === 'B' ? '2门' : orderData.carInfo.model_code_type === 'C' ? '2或4门' : '4门或5门'}}</div>
            <div class="price-box">

              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'ARRIVEPAY'">
                <div class="title">官方零售价：</div>
                <div class="price">{{orderData.exchangeRate.currency_symbol + (orderData.order.retail_amount/100).toFixed(2)}}</div>
              </a>
              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'PREPAY'">
                <div class="title">官方零售价：</div>
                <div class="price">{{'￥' + Math.ceil(orderData.order.retail_amount/100) + '.00'}}</div>
              </a>
              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'ARRIVEPAY'">
                <div class="title">返佣：</div>
                <div class="price color-brown">{{orderData.exchangeRate.currency_symbol + (orderData.order.agent_commission).toFixed(2)}}</div>
              </a>
              <a href="javascript:void(0);" class="price-item" v-if="orderData.order.type === 'PREPAY'">
                <div class="title">{{orderData.set.pay_type === 'FLOAT_PREPAY' ? '浮动' : '常规'}}价：</div>
                <div class="price color-brown">{{'￥' + Math.ceil(orderData.order.cny_pay_price) + '.00'}}</div>
              </a>

            </div>
          </div>
        </div>
        <div class="text" v-if="orderData.order">
          <p class="no-margin">此预约可在{{orderData.order.cancel_end_date}} 之前免费取消</p>
          <p class="no-margin">订单一经确认，未按指定时间取车，将会收取行政费。</p>
        </div>
        <label>
          <input type="checkbox" checked name="" value="">我已经阅读并接受取消条款
        </label>
        <div class="col-12 text-center">
          <b-button v-if="this.orderData.order.pay_status === 'UNPAID' && orderData.order.type === 'PREPAY'" class="btn ft-btn order-btn" style="width: 100px;" :disabled="isDisabled" @click="payForOrder">支付订单</b-button>
          <b-button v-if="this.orderData.order.pay_status === 'UNPAID' && orderData.order.type === 'ARRIVEPAY' && orderData.order.status !== 'CANCELED'" :disabled="isDisabled" class="btn ft-btn order-btn" style="width: 100px;" @click="payForOrder">订单确认</b-button>
          <b-button v-if="this.orderData.order.pay_status === 'UNPAID' && orderData.order.type === 'PREPAY'" class="btn ft-btn order-btn" style="width: 100px; background-color: #17a2b8" :disabled="isDisabled" @click="offlinePay">线下支付</b-button>
        </div>
        <b-modal id="pay-modal" ref="pay-modal" title="订单支付" centered ok-only ok-title="关闭">
          <p class="my-4">请扫描下方二维码进行支付!</p>
          <div>
            <div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
          </div>
        </b-modal>
      </div>
    </div>
  </div>
</template>
<style type="text/css">
   #qrcode img {
    margin: 0 auto;
   }

   .my-4 {
     text-align: center;
   }

</style>
<style scoped>
  .order-btn.disabled,
  .order-btn:disabled {
    background: #a1781e !important;
    border-color: #a1781e !important;
  }
</style>
<script src="./order-paid.js" />
